"use strick"

import React from 'react'
import ReactDOM from 'react-dom'
import * as LoginAction  from '../../actions/LoginAction';
import { connect }  from 'react-redux';

class LoginPanel extends React.Component {

  constructor(props) {
    super(props)

    this.login = {
      username: '',
      password: ''
    }

    this.state = {
      isLogin: false
    }
  }

  componentDidMount() {
    console.log(this.props.login)
  }

  componentDidUpdate() {
    if (this.props.login == true) {
      window.location.href = '/'
    }
  }

  onValueChange(event, key) {
    var value = $(event.target).val();
    this.login[key] = value;
  }

  onLoginSubmit(event) {
    var data = this.login;
    console.log(data)
    this.props.dispatch(
      LoginAction.loginSubmitAsync(data)
    )
  }



  render() {
    return (

      <div className="login-container">
          <div className="login-bg">
            <img src="/public/img/login_bg.jpg" alt=""/>
          </div>
          <div className="login-frame">
            <div className="logo-txt">
              <img src="/public/img/logo_txt.png" alt=""/>
            </div>
            <div className="input-form user-form">
              <div className="input-frame">
                <div className="input-icon user-icon">
                  <img src="/public/img/icon_user.png" alt=""/>
                </div>
                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="用户名"
                        onChange={(event)=>this.onValueChange(event, 'username')}/>
              </div>
            </div>
            <div className="input-form pass-form">
              <div className="input-frame">
                <div className="input-icon pass-icon">
                  <img src="/public/img/icon_lock.png" alt=""/>
                </div>
                <input type="password" class="form-control" id="exampleInputEmail1" placeholder="密码"
                        onChange={(event)=>this.onValueChange(event, 'password')}/>
              </div>
            </div>
            <div className="btn-group">
              <button type="submit" class="btn btn-default"
                      onClick={(event)=>this.onLoginSubmit(event)}>登录</button>
            </div>

          </div>



      </div>

    )
  }
}



const mapStateToProps = (state, ownProps) => {
  return { login: state.login }
}

export default connect(mapStateToProps)(LoginPanel);
